<template>
  <div class="classify">
    <div class="common">
      <div class="common-button" @click="editHit(0)">新增</div>
    </div>

    <div class="table" v-loading="loading">
      <el-table :data="tableData" border :header-cell-style="{
        color: '#333333',
        backgroundColor: '#f3f3f3',
      }">
        <el-table-column prop="" label="一级分类">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.goodClassifyName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="子合作分类数量">
          <template slot-scope="scope">
            <div style="font-weight: bold; color: #3da8f5" @click="subclassificationClick(scope.row)">
              {{ scope.row.sonNum }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <div class="operation">
              <div class="list" @click.prevent="editHit(1, scope.row)">
                编辑
              </div>

              <div class="list" @click.prevent="deleteHit(scope.row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
          layout="prev, pager, next" :total="tableDataTotal" :current-page="page">
        </el-pagination>
      </div>
    </div>

    <!--新增或者编辑-->
    <div class="add">
      <el-dialog :title="addRoaid == 0 ? '新增' : '编辑'" :visible.sync="addVisible" :before-close="addClose" width="30%">
        <div class="add-form">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="一级分类" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入一级分类" clearable></el-input>
            </el-form-item>

            <el-form-item class="attachment">
              <div class="list" @click="addClose">取消</div>
              <div class="list" @click="addConfirm('ruleForm')">保存</div>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!--删除弹出框-->
    <div class="delete">
      <el-dialog title="删除" :visible.sync="deleteVisible" :before-close="deleteClose">
        <div class="delete-title">是否确认删除？</div>
        <div class="delete-attachment">
          <div class="list" @click="deleteClose">取消</div>
          <div class="list" @click="deleteConfirm">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  saveCommodityClassifyList,
  saveCommodityClassifyListAdd,
  saveCommodityClassifyListDelete,
} from "@/api/save";

var throttle = require("@/utils/throttle"); // 防抖

export default {
  data() {
    return {
      page: 1,
      limit: 10,
      tableData: [],
      tableDataTotal: 0,
      addRoaid: 0,
      loading: false,
      commonObj: {},
      //--------------
      addVisible: false,
      ruleForm: {
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入合作类型", trigger: "blur" },
          { max: 6, message: "输入分类名称最多不能超过6位", trigger: "blur" },
        ],
      },
      //-----------
      deleteVisible: false,
    };
  },
  created() {
    this.loading = true;
    this.saveCommodityClassifyListMet();
  },
  methods: {
    saveCommodityClassifyListMet() {
      let params = {
        goodClassifyType: 0,
        fatherId: "",
        pageSize: this.limit,
        pageNo: this.page,
      };

      saveCommodityClassifyList(params).then((res) => {
        if (res.errorCode == null) {
          this.tableData = res.resultData.goodClassifyList;
          this.tableDataTotal = res.resultData.totalNum;
          this.loading = false;
        }
      });
    },

    //-------------
    editHit(index, item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      if (index == 1) {
        this.commonObj = item;
        this.ruleForm.name = item.goodClassifyName;
      } else {
        this.commonObj = {};
        this.ruleForm.name = "";
      }

      this.addRoaid = index;
      this.addVisible = true;
    },
    addClose() {
      this.commonObj = {};
      this.ruleForm.name = "";
      this.addVisible = false;
    },
    addConfirm: throttle.throttle(function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            goodClassifyType: 0,
            goodClassifyId:
              this.addRoaid == 0 ? "" : this.commonObj.goodClassifyId,
            fatherId: this.addRoaid == 0 ? "" : this.commonObj.goodClassifyId,
            goodClassifyName: this.ruleForm.name,
            fatherId: "",
            goodClassifyIcon: "",
          };

          saveCommodityClassifyListAdd(params).then((res) => {
            if (res.errorCode == null) {
              if (this.addRoaid == 0) {
                this.$message.success("新增分类成功！");
              } else {
                this.$message.success("编辑分类成功！");
              }

              this.loading = true;
              this.saveCommodityClassifyListMet();
              this.addVisible = false;
            }
          });
        } else {
          return false;
        }
      });
    }, 3000),
    //--------
    deleteHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.commonObj = item;
      this.deleteVisible = true;
    },
    deleteClose() {
      this.deleteVisible = false;
    },
    deleteConfirm() {
      let params = this.commonObj.goodClassifyId;

      saveCommodityClassifyListDelete(params).then((res) => {
        if (res.errorCode == null) {
          this.$message.success("删除成功！");
          this.loading = true;
          this.saveCommodityClassifyListMet();
          this.deleteVisible = false;
        }
      });
    },

    subclassificationClick(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.$router.push({
        path: "/save/commodity/classify-subclassification",
        query: {
          id: item.goodClassifyId,
        },
      });
    },
    //-------------------------------------------------
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      this.saveCommodityClassifyListMet();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      this.saveCommodityClassifyListMet();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/delete.less");

.classify {
  .common {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;

    .common-button {
      padding: 9px 20px;
      box-sizing: border-box;
      border-radius: 5px;
      background: #2a82e4;
      font-size: 14px;
      color: #fff;
      margin-left: 20px;
      cursor: pointer;
    }
  }

  .table {
    cursor: pointer;

    .operation {
      display: flex;
      align-items: center;
      color: #2a82e4;

      .list {
        margin-right: 20px;
        cursor: pointer;
      }
    }

    .parallel {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 10px;
      box-sizing: border-box;

      .lint {
        width: 1px;
        height: 20px;
        background: #ccc;
      }
    }

    .banner-img {
      width: 70px;
      height: 70px;
    }
  }

  .add {
    /deep/ .el-dialog__header {
      font-size: 16px;
      text-align: center;
    }

    /deep/ .el-dialog__body {
      padding-bottom: 10px;
    }

    .add-form {
      /deep/ .el-select {
        width: 100%;
      }

      .img {
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ccc;
        border-radius: 5px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
      }

      .attachment {
        margin-top: 50px;

        /deep/ .el-form-item {
          margin-bottom: 0;
        }

        /deep/ .el-form-item__content {
          margin-left: 0 !important;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .list {
          background: #3da8f5;
          color: #fff;
          font-size: 16px;
          margin-right: 50px;
          border-radius: 5px;
          width: 100px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .list:first-child {
          background: #808080;
        }

        .list:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>